<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        html,
        body {
            height: 100%;
        }

        .nav {
            width: 100%;
            height: 6%;
            background-color: rgb(0, 170, 255);
            display: flex;
            align-items: center;
            color: white;
        }

        .nav :nth-child(1) {
            margin-left: 60px;
            font-weight: 700;
            font-size: 18px;
        }

        .nav :nth-child(2) {
            margin-left: 60px;
        }

        .nav :nth-child(3) {
            margin-left: 880px;
        }

        .nav :nth-child(4) {
            margin-left: 15px;
        }

        .content {
            height: 94%;
            display: flex;
        }

        .content .left {
            width: 12%;
            height: 100%;
            background-color: rgb(22, 42, 60);
            color: white;
        }

        .content .left .list {
            margin: 25px 0;
        }

        .content .right {
            width: 88%;
            height: 100%;
            background-color: aliceblue;
        }

        .content .right .firstline {
            height: 5%;
            /* background-color: blueviolet; */
            display: flex;
            align-items: center;
        }

        .content .right .firstline :nth-child(1) {
            margin: 0 10px;
            color: gray;
        }

        .content .right .firstline :nth-child(2) {
            width: 100px;
            height: 100%;
            background-color: rgb(73, 57, 57);
            display: flex;
            align-items: center;
            padding-left: 18px;
            color: white;
        }

        .content .right .firstline :nth-child(3) {
            margin-left: 1040px;
            color: gray;
        }

        .content .right .firstline :nth-child(4) {
            margin-left: 10px;
            color: gray;
        }

        .content .right .form {
            height: 10%;
            width: 100%;
            /* background-color: cornflowerblue; */
            display: flex;
            justify-content: space-between;
            color: white;
        }
        .content .right .form .one {
            width: 23%;
            background-color:rgb(0, 170, 255);
            position: relative;
        }
       
        .content .right .form .two {
            width: 23%;
            background-color: rgb(0, 170, 255);
            position: relative;
        }
        .content .right .form .three {
            width: 23%;
            background-color: rgb(69, 177, 69);
            position: relative;
        }
        .content .right .form .four {
            width: 23%;
            background-color: rgb(98, 102, 102);
            position: relative;
        }
        .content .right .form .income{
            font-size: 12px;
            margin-top: 5px;
            margin-left: 10px;
        }
        .content .right .form .money{
            margin-top: 5px;
            margin-left: 10px;
        }
        .content .right .form img{
            position: absolute;
            width: 30px;
            height: 30px;
            top: 5px;
            right: 15px;
            background-color: red;
        }
        .content .right .echarts {
            width: 100%;
            height: 47%;
            /* background-color: rgb(224, 232, 240); */
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .content .right .echarts .left1{
            width: 49%;
            height: 100%;
            border: 1px solid aliceblue;
            background-color: white;
        }
        .content .right .echarts .right{
            width: 49%;
            height: 100%;
            border: 1px solid aliceblue;
            background-color: white;
        }
        .content .right .data {
            height: 35%;
            border: 1px solid aliceblue;
            background-color: white;
            margin: 0 10px;
            margin-top: 10px;
        }
        .content .right .data table{
            width: 100%;
            text-align: center;
        }
        .content .right .data table tbody tr{
            line-height: 40px;
        }
        .content .right .box {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <span>后台管理系统</span>
        <span class="iconfont">*</span>
        <span>当前用户：bootstrap中文</span>
        <span>角色：管理员</span>
    </div>
    <div class="content">
        <div class="left">
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;后台首页</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;设计元素</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;表单元素</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;示例页面</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;常用列表</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;脚本插件</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
            <div class="list">
                <span class="iconfont">&emsp;&emsp;&emsp;统计图表</span>
                <span>&emsp;&emsp;&gt;</span>
            </div>
        </div>
        <div class="right">
            <div class="firstline">
                <span class="iconfont">*</span>
                <span>欢迎首页</span>
                <span class="iconfont">*</span>
                <span>页面操作</span>
            </div>
            <div class="form box">
                <div class="one">
                    <div class="income">今日收入</div>
                    <div class="money">100,000.00</div>
                    <img src="" alt="">
                </div>
                <div class="two">
                    <div class="income">昨日收入</div>
                    <div class="money">200,000.00</div>
                    <img src="" alt="">
                </div>
                <div class="three">
                    <div class="income">月度累计收入</div>
                    <div class="money">1000,000.00</div>
                    <img src="" alt="">
                </div>
                <div class="four">
                    <div class="income">年度累计收入</div>
                    <div class="money">5000,000.00</div>
                    <img src="" alt="">
                </div>
            </div>
            <div class="echarts box">
                <div class="left1"></div>
                <div class="right"></div>
            </div>
            <div class="data box">
                <table>
                    <thead>
                       <tr>
                        <th>#</th>
                        <th>订单号</th>
                        <th>商品名称</th>
                        <th>下单日期</th>
                        <th>日期</th>
                        <th>处理情况</th>
                       </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                            <td>1</td>
                            <td>滑块特效</td>
                            <td>黑色休闲裤</td>
                            <td>2019-05-01</td>
                            <td>完成</td>
                            <td></td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise-ajax.js"></script>
<script src="./render.js"></script>
<script>
    var con = document.querySelector('.content .right .echarts .left1')
    var e = echarts.init(con)
    e.setOption({
        title: {
            text: '每月收入',//标题
            left: 'left',//标题居中
        },
        legend: {//图例
            name: ['当前每月收入', '同期每月收入'],
            top: 30,
        },
        xAxis: {
            data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11','12']
        },//x轴设置
        yAxis: {
            axisLine: { show: true },
            min: 1500,
            max: 5000,
            splitNumber: 8,
            splitLine: {
                show: true
            },
            // type: 'value',
            // axisLabel: {
            //     show: true,
            //     formatter: '${value}k',
            // }
        },//y轴设置
        series: [//数据系列
            {
                name: '当前每月收入',
                barWidth: 15,//柱子的宽度
                // showBackground:true,//显示背景色
                // backgroundStyle:{//改背景色的样式
                //     color:'white',
                // },
                // itemStyle:{
                //     borderRadius:[10,10,0,0],//改圆角
                // },
                color: 'rgb(0,123,255)',//纯色
                // color:'',=渐变色--复制粘贴
                type: 'bar',//'line'折线图,'bar'柱状图,'pie'饼状图
                data: [2600, 1550, 1600, 3650, 4600, 3500, 1600, 2500, 2200, 1700, 3800, 1650]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
            {
                name: '同期每月收入',
                barWidth: 15,//柱子的宽度
                // showBackground:true,//显示背景色
                // backgroundStyle:{//改背景色的样式
                //     color:'white',
                // },
                // itemStyle:{
                //     borderRadius:[10,10,0,0],//改圆角
                // },
                color: 'gainsboro',//纯色
                // color:'',=渐变色--复制粘贴
                type: 'bar',//'line'折线图,'bar'柱状图,'pie'饼状图
                data: [2050, 1600, 1900, 3000, 4000, 3700, 1800, 2000, 2550, 3750, 3700,3650]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
        ]
    })
    var con1 = document.querySelector('.content .right .echarts .right')
    var e1 = echarts.init(con1)
    e1.setOption({
        title: {
            text: '每年收入走势',//标题
            left: 'left',//标题居中
        },
        legend: {//图例
            name: ['每年收入走势', '每年同期收入走势'],
            top: 30,
        },
        xAxis: {
            data: [2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020]
        },//x轴设置
        yAxis: {
            axisLine: { show: true },
            min: 20,
            max: 80,
            splitNumber: 7,
            splitLine: {
                show: true
            }
        },//y轴设置
        series: [//数据系列
            {
                name: '每年收入走势',
                type: 'line',//'line'折线图,'bar'柱状图,'pie'饼状图
                symbolSize: 4,//圆点大小
                symbol: 'circle',//圆点的形状
                smooth: true,//平滑曲线
                itemStyle: {
                    normal: {
                        color: 'green',//线和实心圆点的颜色
                        borderWidth: '10',//圆点的边框宽度
                        lineStyle: { width: 2 },//折线的宽度
                        // shadowBlur: 5,//阴影大小
                        // shadowColor: 'gray',//阴影颜色

                    }
                },
                data:  [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
            {
                name: '每年同期收入走势',
                type: 'line',//'line'折线图,'bar'柱状图,'pie'饼状图
                symbolSize: 4,//圆点大小
                symbol: 'circle',//圆点的形状
                smooth: true,//平滑曲线
                itemStyle: {
                    normal: {
                        color: 'brown',//线和实心圆点的颜色
                        borderWidth: '10',//圆点的边框宽度
                        lineStyle: { width: 2 },//折线的宽度
                        // shadowBlur: 5,//阴影大小
                        // shadowColor: 'gray',//阴影颜色

                    }
                },
                data: [48, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 57]//根据这组数据中的最大值，默认作为x和y轴的刻度
            }
        ]
    })
</script>
<script>
    render()
</script>